<template>
    <div>
        <basic-layout title="访问记录" :showAddBtn="false" :showFilterBtn="true" @handleFilter="$refs.queryPopupRef.show = true">
            <div class="columnFlex">
                <van-row class="listCon">
                    <van-tabs v-model="activeName">
                        <van-tab title="我的拜访" name="myVisit"></van-tab>
                        <van-tab title="拜访我的" name="visitMy"></van-tab>
                        <van-tab title="我的邀请" name="myInvite"></van-tab>
                    </van-tabs>
                    <div class="tabContent">
                        <myVisit ref="myVisitRef" v-show="activeName === 'myVisit'" />
                        <visitMy ref="visitMyRef" v-show="activeName === 'visitMy'" />
                        <myInvite ref="myInviteRef" v-show="activeName === 'myInvite'" />
                    </div>
                </van-row>
            </div>
        </basic-layout>
        <!-- 筛选条件弹出框 -->
        <queryPopup ref="queryPopupRef" @handleSearch="handleSearch" @handleReset="handleReset">
            <van-form class="filterBox">
                <label>关键字</label>
                <van-field clearable v-model="formData.keyword" :placeholder="palceholderObj[activeName]" />
                <label>拜访事由</label>
                <van-field>
                    <template #input>
                        <div class="textCon" @click="showPicker = true">
                            <span v-if="!formData.visitReasonText" style="color: #aaa">请选择拜访事由</span>
                            <span v-else>{{ formData.visitReasonText }}</span>
                        </div>
                    </template>
                    <template #button>
                        <van-icon v-if="formData.visitReasonText" name="cross" @click="clearPicker('reason')" />
                    </template>
                </van-field>
                <label>拜访时间</label>
                <van-field>
                    <template #input>
                        <div class="textCon" @click="showTimePicker = true">
                            <span v-if="!formData.visitTimeBgn" style="color: #aaa">请选择拜访时间</span>
                            <span v-else>{{ formData.visitTimeBgn }} ~ {{ formData.visitTimeEnd }}</span>
                        </div>
                    </template>
                    <template #button>
                        <van-icon v-if="formData.visitTimeBgn" name="cross" @click="clearPicker('time')" />
                    </template>
                </van-field>
            </van-form>
        </queryPopup>
        <!-- 食堂列表选择 -->
        <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="reasonList" @select="onConfirm" />
        <!-- 预定日期 -->
        <van-calendar v-model="showTimePicker" :min-date="minDate" :max-date="maxDate" :allow-same-day="true" type="range" @confirm="onTimeConfirm" />
    </div>
</template>

<script>
    import myInvite from './myInvite.vue';
    import myVisit from './myVisit.vue';
    import visitMy from './visitMy.vue';
    import { queryDic } from '@api/common';

    export default {
        components: { myInvite, myVisit, visitMy },
        data () {
            return {
                showPicker: false,
                showTimePicker: false,
                minDate: new Date(new Date().getFullYear() - 1, 0, 1),
                maxDate: new Date(new Date().getFullYear() + 1, 12, 31),
                formData: {
                    keyword: '',
                    visitReason: '',
                    visitReasonText: '',
                    visitTimeBgn: '',
                    visitTimeEnd: ''
                },
                activeName: 'myVisit',
                palceholderObj: {
                    myVisit: '拜访人',
                    visitMy: '来访人 / 来访单位 / 联系电话',
                    myInvite: '邀请人 / 来访单位 / 联系电话'
                },
                reasonList: []
            };
        },
        created () {
            this.getDicData();
            if (this.$route.params.activeName) {
                this.activeName = this.$route.params.activeName;
            }
        },
        methods: {
            handleSearch () {
                if (this.formData.keyword && !this.$commonReg.textReg.test(this.formData.keyword)) {
                    this.$Notify({ type: "warning", message: `关键字${this.$commonReg.textMsg}` });
                    return;
                }
                let params = {
                    keyword: this.formData.keyword || '',
                    visitReason: this.formData.visitReason || '',
                    visitTimeBgn: this.formData.visitTimeBgn || '',
                    visitTimeEnd: this.formData.visitTimeEnd || ''
                }
                this.$refs.myVisitRef.getSearch(params);
                this.$refs.visitMyRef.getSearch(params);
                this.$refs.myInviteRef.getSearch(params);
            },
            // 重置
            handleReset () {
                this.formData = {
                    keyword: '',
                    visitReason: '',
                    visitReasonText: '',
                    visitTimeBgn: '',
                    visitTimeEnd: ''
                };
                this.handleSearch();
            },
            // 邀请事由选择
            onConfirm (item) {
                this.formData.visitReason = item.value;
                this.formData.visitReasonText = item.name;
                this.showPicker = false;
                this.handleSearch();
            },
            // 拜访时间选择
            onTimeConfirm (date) {
                const [start, end] = date;
                this.formData.visitTimeBgn = new Date(start).format('yyyy-MM-dd');
                this.formData.visitTimeEnd = new Date(end).format('yyyy-MM-dd');
                this.showTimePicker = false;
                this.handleSearch();
            },
            // 清空查询条件
            clearPicker (type) {
                if (type === 'reason') {
                    this.formData.visitReason = "";
                    this.formData.visitReasonText = "";
                } else if (type === 'time') {
                    this.formData.visitTimeBgn = "";
                    this.formData.visitTimeEnd = "";
                }
                this.handleSearch();
            },
            // 拜访事由
            getDicData () {
                queryDic('SA_VISITORS_REASON').then(res => {
                    if (res.code === 1000 && res.data) {
                        this.reasonList = res.data;
                    }
                })
            }
        },
    };
</script>

<style scoped lang="less">
    .listCon {
        padding: 0;
        /deep/.van-tabs {
            overflow: hidden;
            .van-tabs__wrap {
                height: 40px;
            }
            .van-tabs__line {
                background-color: #4eb3e9;
            }
        }
        .tabContent {
            margin-top: 5px;
            height: calc(100% - 45px);
            padding: 0 10px;
            overflow: auto;
            /deep/.van-swipe-cell {
                margin-top: 10px;
            }
            /deep/.van-swipe-cell:nth-of-type(1) {
                margin-top: 5px;
            }
        }
    }
</style>